<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2593132_j29vcvk8n6a.css">
</head>
<style>
    *{
        padding: 0;
        margin: 0;

    }
    
    :root{
        --color: #3370ff;   
       
    }
    body{
        width: 100vw;
        height: 100vh;
        background: linear-gradient( 
91deg
 , rgb(39 90 183 / 30%) , rgba(0, 0, 200, 0) );
 box-sizing: border-box;
    }
    .login{
        width: 444px;
        height: 500px;
        margin:  50px auto;
        padding-left: 32px;
        padding-right: 32px;
        /* box-shadow: 0 0 50px #ccc; */
        background-color: #fff;
        box-shadow: 9px 7px 40px -6px rgb(0 0 0 / 25%);
        box-sizing: border-box;
    }
    .login h1{
        padding-top: 56px;
    }
    .base{
        font-size: 13px;
        color: #646a73;
        margin-top: 14px;
        line-height: 18px;
   
    }
    .login a{
        text-decoration: none;
        color: var(--color)
    }
    .iphone{
        margin-top: 30px;
    }
    .iphonee{

        padding-bottom: 5px;
        color: var(--color);
        border-bottom: 3px solid var(--color);
    }
    .iphone a:last-child{
        padding-left: 20px;
        color: #646a73;
    }
    .num{
        width: 380px;
        height: 100px;
        box-sizing: border-box;
        margin-top: 20px;
        position: relative;
        overflow: hidden;
       
    }
    .num2{
        width: 380px;
        height: 45px;
        box-sizing: border-box;
        margin-top: 20px;
        position: relative;
        overflow: hidden;
       
    }
    input{
        width: 70%;
        height: 30%;
        border: 1px solid #ccc;
        border-radius: 7px;
        outline-color: var(--color);
        text-indent: 5px;
        font-size: 20px;
        margin: 10px 0;
    }
    .while{
        margin-top: 9px;
        color: white;
        background-color: var(--color);
        outline: none;
        border: none;
        border-radius: 7px;
       
  
    }

    p{
        margin-top: 10px;
        font-size: 14px;
        color: #ff5b4c
    }
    .pp{
        border: 3px solid #ff5b4c;
    }       
    .hide{
        display: none;
    }
    
    .n:hover{
        opacity: 0.9;
    }
    /* 86+ */
    .baliu{
        position: absolute;
        top: 11px;
        left: 7px;  
        border-right: 1px solid #ccc;
        padding-right: 8px;
    }
        /* 86+ 字体*/
    .icon-sanjiaoxing{
        font-size: 10px;
        padding-left: 7px;
    }

</style>
<body>
  <div class="login">   
    <h1>登录明德教务管理系统</h1>

    <div class="base">

    <span>登录即代表你已阅读并同意</span>
    <span><a  href="#" >服务协议</a>
    <span> 和</span>
    <a  href="#" >隐私政策</a></span></div>
<div class="iphone">

    <a href="#"><span class="iphonee">学生端</span></a>
    <a href="#"><span>教务人员</span></a>

</div>  
<form action="/logon" method="POST" enctype="application/x-www-form-urlencoded">
    <div class="num">   
       学员号:<input type="text" name="user" autocomplete="off" id="username" ><br>
         <span style="padding-right: 8px;">密 码</span>: <input type="text" id="password" name="password" autocomplete="off"> 
    </div>
    <p class="hide" id="p">请输入有效的电话号码</p>
    <div class="change">    
        <button class="num2 while " id="login"  >下一步</button>
    </div>
</form>
<div class="base"><span>还没有账号?</span><a href="/register" style="text-decoration: underline;"  ><span>立即注册</span></a></div>

</div>

</body>
<script>


document.getElementById("login").onclick=function(e){
    e.preventDefault();
    let  password=document.getElementById("password").value
 let  username=document.getElementById("username").value
    let xhr=new XMLHttpRequest();
   
    xhr.onreadystatechange=function(){
       if(this.readyState ===4 && this.status ===200){
        result =this.responseText;
        console.log(result)
        if(result =="true"){
            location.href="/"
        }else{
            alert("账号密码错误!请重新填写")

        }
       }
    }
    
    xhr.open("post","/logon",true)
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    xhr.send(`user=${username}&password=${password}`)
    return false;
    
}
</script>
</html>